<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>NCUT 猫</title>
    <!-- jquery -->
    <script src="./lib/jquery.min.js"></script>
    <script src="./lib/jquery.form.js"></script>
    <!-- popper -->
    <script src="./lib/popper.min.js"></script>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="./lib/bootstrap.min.css">
    <link rel="stylesheet" href="./lib/bootstrap-theme.min.css">
    <script src="./lib/bootstrap.min.js"></script>
    <script src="./lib/bootstrap.bundle.min.js"></script>
    <style type="text/css">
    p {
        display: inline-block;
        margin: 1vw;
        width: 10vw;
        height: 15vw;
    }

    p img {
        width: 9vw;
        height: 9vw;
        margin: 0.5vw;
    }

    p span {
        display: inline-block;
        height: 5vw;
        line-height: 5vw;
        text-align: center;
        width: 10vw;
    }

    body {
        background-color: #e8f5e9;
    }
    </style>
</head>

<body>
    <script type="text/javascript">
    (async () => {
        let r = await $.get("/img/cat-rand?cid=0");
        if (!r.success) return alert(r.error);
        r = r.result;
        for (let i in r) console.log(r[i], i);
        for (let i in r) document.body.innerHTML += `<p><img src="/img/cat/${r[i].hash}" /><span>${r[i].lore}</span></p>`;
    })();
    </script>
</body>

</html>